Search for notes by fellow students, in your own course and all over the country.

Browse our notes for titles which look like what you need, you can preview any of the notes via a sample of the contents. After you're happy these are the notes you're after simply pop them into your shopping cart.

My Basket

Buy These Notes

You have nothing in your shopping cart yet.

Title: java script and html
Description: Learn java script for web designing or html5 basics and contact me if your intrested in futher learning.
Buy These NotesPreview

Document Preview

Extracts from the notes are below, to see the PDF you'll receive please use the links above

HTML Basics
Welcome to HTML Basics
...
HTML is the building block for web pages
...


Objectives:

By the end of this workshop, you will be able to:
Use a text editor to author an HTML document
...

Create hyperlinks to other documents
...

Add images to your document
...

Apply colors to your HTML document
...

Q: What is Notepad and where do I get it?
A: Notepad is the default Windows text editor
...
It should be a little blue notebook
...
In OSX use TextEdit and change
the following preferences: Select (in the preferences window) Plain text instead of Rich text and
then select Ignore rich text commands in HTML files
...

One thing you should avoid using is a word processor (like Microsoft Word) for authoring your HTML
documents
...
The documents themselves are
plain text files with special "tags" or codes that a web browser uses to interpret and display
information on your computer screen
...
This text is bold


Save the file as mypage
...
Start your Internet browser
...
A dialog box will appear
...
html - select it and click Open
...
html
...
To view how the page should look, visit this web page:
http://profdevtrain
...
edu/html/mypage
...
This is the minimum required information for a web
document and all web documents should contain these basic components
...
This tag tells your browser that this is the start of an html document
...
This tag tells your browser that this is the end of the html
document
...
Header information is not
displayed in the browser window
...
The tag is used to uniquely<br />identify each document and is also displayed in the title bar of the browser window<br> ...<br> <br />The text between the <b> and </b> tags will be displayed in a bold font<br> ...<br> htm or the <br> ...<br> The <br> ...<br> <br />It is perfectly safe to use either <br> ...<br> htm, but be consistent<br> ...<br> htm and mypage<br> ...<br> <br /><br />How to View HTML Source<br /><br />A good way to learn HTML is to look at how other people have coded their html pages<br> ...<br> This will<br />open a window that shows you the actual HTML of the page<br> ...<br> <br /><br />HTML Tags<br />What are HTML tags?<br /><br />HTML tags are used to mark-up HTML elements<br />HTML tags are surrounded by the two characters < and ><br />The surrounding characters are called angle brackets<br />HTML tags normally come in pairs like <b> and </b><br />The first tag in a pair is the start tag, the second tag is the end tag<br />The text between the start and end tags is the element content<br />HTML tags are not case sensitive, <b> means the same as <B><br /><br />Logical vs<br> ...<br> Logical tags are designed to describe (to the<br />browser) the enclosed text's meaning<br> ...<br> By<br />placing text in between these tags you are telling the browser that the text has some greater<br />importance<br> ...<br> <br />Physical tags on the other hand provide specific instructions on how to display the text they enclose<br> ...<br> <br /><big>: Makes the text usually one size bigger than what's around it<br> ...<br> <br /><br /> Physical tags were invented to add style to HTML pages because style sheets were not around, though<br />the original intention of HTML was to not have physical tags<br> ...<br> <br /><br />HTML Elements<br /><br />Remember the HTML example from the previous page:<br /><html><br /><head><br /><title>My First Webpage


This is my first homepage
...

This is also an HTML element:

This is my first homepage
...
The purpose
of the tag is to define the HTML element that contains the body of the HTML document
...

When you enclose an element in with multiple tags, the last tag opened should be the first tag closed
...


This is the proper way to close nested tags
...


Why Use Lowercase Tags?

You may notice we've used lowercase tags even though I said that HTML tags are not case sensitive
...
The World Wide Web Consortium (W3C), the group responsible for
developing web standards, recommends lowercase tags in their HTML 4 recommendation, and XHTML
(the next generation HTML) requires lowercase tags
...
Attributes can provide additional information about the HTML elements on
your page
...
For instance, if we add the bgcolor attribute, we can tell the browser that the background color
of your page should be blue, like this:
...
With an added border attribute, you can tell the browser that
the table should have no borders:


...
Attributes are always added to the start tag of an HTML element and the
value is surrounded by quotes
...
Double style quotes are the most common, but
single style quotes are also allowed
...

Browsers should continue to support deprecated tags and attributes, but eventually these tags
are likely to become obsolete and so future support cannot be guaranteed
...
org
...


Basic HTML Tags
Tag

Description



Defines an HTML document



Defines the document's body

to

Defines header 1 to header 6



Defines a paragraph




Inserts a single line break



Defines a horizontal rule



Defines a comment

Headings
Headings are defined with the

to

tags
...


This is a heading


This is a heading


This is a heading


This is a heading


This is a heading

This is a heading


HTML automatically adds an extra blank line before and after a heading
...


I can align headings

This is a centered heading

This is a heading aligned to the right


Paragraphs
Paragraphs are defined with the

tag
...
You can use the align
attribute with a paragraph tag as well
...
A browser ignores any
indentations or blank lines in the source text
...
HTML automatically adds an extra blank line before and after a paragraph
...
The

tag forces a line break wherever you place it
...

This Code

This
is a para
graph with
line breaks



Would Display
This
is a para
graph with line breaks

The
tag has no closing tag
...
It takes attributes such as align and width
...
A comment can be placed
anywhere in the document and the browser will ignore everything inside the brackets
...

This Code

This html comment would be displayed like
this
...


Notice you don't see the text between the tags
...
To view the source code for this page, in your browser window, select View
and then select Source
...

HTML automatically adds an extra blank line before and after some elements, like before and after a
paragraph, and before and after a heading
...


Try It Out!

Open your text editor and type the following text:


My First Webpage


My First Webpage


Welcome to my first web page
...


By learning html, I'll be able to create web pages like a pro
...




Save the page as mypage2
...
Open the file in your Internet browser
...
austincc
...
html

Other HTML Tags

As mentioned before, there are logical styles that describe what the text should be and physical styles
which actually provide physical formatting
...


Logical Tags
Tag






Physical Tags

Description
Defines an abbreviation
Defines an acronym
Defines an address element
Defines a citation
Defines computer code text

Defines

Defines

Defines

Defines

Defines

Defines

Defines

Defines

Defines

Defines

Defines

a long quotation
text
a definition term
emphasized text
inserted text
keyboard text
preformatted text
a short quotation
sample computer code
strong text
a variable

Tag


Description
Defines bold text



Defines

big text


Defines italic text
 Defines small text
 Defines superscripted text
 Defines subscripted text

Defines teletype text

Deprecated

...



Some Examples:
The following paragraph uses the 
 tag

...


We the people of the United States, in order to form a more perfect Union, establish Justice,
insure domestic Tranquility, provide for the common defense, promote the general Welfare, and
secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this
Constitution for the United States of America

...

 It's conceivable that some future browser may render blockquoted text in some other
way

...


This Code

Would Display

WWW

WWW

When you hold your mouse pointer over the WWW, text in the title attribute will appear in

...

 If we want the browser to actually display these characters we must insert character
entities in place of the actual characters themselves

...

 The & means we are beginning a special character, the ; means ending a special
character and the letters in between are sort of an abbreviation for what it's for

...

 The disadvantage is that not all browsers support the
newest entity names, while the support for entity numbers is very good in almost all browsers

...



Non-breaking Space

The most common character entity in HTML is the non-breaking space  

...

 If you add 10 spaces in your text, HTML will remove 9 of them

...


This Code
 This code
as this

...



This Code
 This code     would This code
appear with three extra spaces

...



Would Display
would appear with three extra

To see a list of character entities, visit this page:
http://profdevtrain

...

edu/html/entities

...

 The World Wide Web Consortium (W3C) has removed the
 tag from its recommendations

...


The  Tag Should NOT be used

...

 The background can be a color
or an image

...

 The value of this attribute can be
a hexadecimal number, an RGB value, or a color name:



The lines above all set the background-color to black

...

 The value of this
attribute is the URL of the image you want to use

...



The URL can be relative (as in the first line above) or absolute (as in the second line above)

...

 The World Wide Web Consortium (W3C) has
removed these attributes from its recommendations

...



Try It Out!

Open your text editor and type the following text:



My First Webpage

Text to be displayed
The  tag is used to create an anchor to link from, the href attribute is used to tell the address of
the document or page we are linking to, and the words between the open and close of the anchor tag
will be displayed as a hyperlink

...

austincc

...

 By default, the
link will open in the current window

...

austincc

...

 Here is a link to ACC's Help Desk:

...

 When using named anchors we can create links
that can jump directly to a specific section on a page, instead of letting the user scroll around to find
what he/she is looking for

...

 Below is the syntax of a named anchor:
Text to be displayed
To link directly to the top section, add a # sign and the name of the anchor to the end of a URL, like
this:
This Code

Would Display

href="http://profdevtrain

...

edu/html Back to top of page
/10links

...

html will look like
this:

Back to top of page

Back to top of page 

Note: Always add a trailing slash to subfolder references

...

austincc

...

austincc

...

 Each
chapter within the document is given a named anchor, and links to each of these anchors are put at
the top of the document

...

 No error occurs

...

 To
display an image on a page, you need to use the src attribute

...

 The value of
the src attribute is the URL of the image you want to display on your page

...

gif">

Not only does the source attribute specify what image to use, but where the image is located

...

gif, means that the browser will look for the image name chef

...



src="chef

...



src="images/chef

...

 This can go on down as many layers
as necessary

...

/chef

...



src="

...

gif" means that the image is
two folders up from the html document that called
for it

...

/images/chef

...



src="

...

gif" means
this goes multiple layers up

...

 If you put an image tag
between two paragraphs, the browser shows the first paragraph, then the image, and then the second
paragraph

...

 The value of the alt attribute is
author-defined text:

...

html in your text editor and add code highlighted in bold:


My First Webpage


My First Web page

Welcome to my first webpage

...



By learning html, I'll be able to create web pages like a pro

...







Row 1, cell 1Row 1, cell 2


Would Display

row 1, cell 1 row 1, cell 2

Open up your text editor
...
From here on I will only be
writing what goes between the tags
...
austincc
...
gif">  



Save your page as mytable1
...
To see how your page should look
visit this web page: http://profdevtrain
...
edu/html/mytable1
...

This code













HeadingAnother Heading
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2


Would Display

Heading

Another Heading

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Cell Padding and Spacing
The tag has two attributes known as cellspacing and cellpadding
...
These properties may be used separately or together
...
The default is zero
...

This Code








some textsome text
some textsome text


Would Display

some text some text
some text some text

Cellpadding is the pixel space between the cell contents and the cell border
...
This feature is not used often, but sometimes comes in handy when you have
your borders turned on and you want the contents to be away from the border a bit for easy viewing
...
Cellpadding can be handled in a style
sheet
...
It can be defined as a fixed width or
a relative width
...
For
example, this code, , will produce a table that is 550 pixels wide
...
Hence this code, width="80%">, will produce a table that occupies 80 percent of the screen
...
For example, a table width of 100% will
always span the entire width of the browser window whether the visitor has a 800x600 display or a
1024x768 display (etc)
...


HTML Layout - Using Tables
One very common practice with HTML, is to
use HTML tables to format the layout of an
HTML page
...
As you can see on this page, there
is a left column and a right column
...


An HTML
is used to divide a part of
this Web page into two columns
...

No matter how much text you add to this
page, it will stay inside its column borders
...
Open your text editor and type
the following text:


My First Web Page







Home
  • Contact

  • Links

    • Welcome!


    Welcome to my first webpage
    ...
    Just my little text editor and a keen understanding of html
    ...
    Notice I'm able to use paragraphs, lists and headings
    ...
    I'm very clever
    ...


    Lily Tomlin



    Janet Doeson

    Technical Specialist

    512
    ...
    5555

    Contact me at Title: java script and html
    Description: Learn java script for web designing or html5 basics and contact me if your intrested in futher learning.

    Buy These NotesPreview